<template>
	<view>
		<view class="head-nav">
			<view class="n-l" :class="navIndex==0?'activite':''" @click="checkIndex(0)">一级团队<view class="icons"></view></view>
			<view class="n-l" :class="navIndex==1?'activite':''" @click="checkIndex(1)">二级团队<view class="icons"></view></view>
		</view>
		<!-- 内容切换 -->
		<view class="content" v-if="toolcar">
			<view class="fc-66 fs-26 pad-left-30">团队总人数：<text>{{total || 0}}人</text></view>
			<view class="height-25"></view>
			<vlew class="flex content-item" v-for="(item,index) in toolcar" :key="index">
				<view class="userimg" >
					<image :src="item.avatar" style="border-radius: 50%!important;"></image>
				</view>
				<view class="flex-1 mar-left-20">
					<view class="flex" style="align-items: center;">
						<view class="flex-1">
							<view class="fs-32 fc-33 one-ellipsis">{{item.nickname}}</view>
							<view class="flex-1 fc-99 fs-28 one-ellipsis mar-left-5 pad-top-10">{{item.createTime}}</view>	
						</view>
						<view class="fc-33 fs-24"></view>
					</view>				
				</view>
			</vlew>		
		</view>
	</view>

</template>

<script>
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				navIndex: 0,				
				toolcar:[],
				total: 0,
			}
		},
		computed:{
			...mapState(["userInfo"])
		},
		mounted() {
			if(!this.userInfo) {
				this.$store.dispatch("reLogin");
				return;
			}
		},
		methods: {
			checkIndex(index) {
				this.navIndex = index;
				if(index == 0) {
					this.findFirstTInviteInfo();
				} else if(index == 1) {
					this.findTInviteInfo();
				}
			},
			// 查询一级
			findFirstTInviteInfo() {
				var param = {
					userId: this.userInfo.id
				}
				this.$apis.findFirstTInviteInfo(param).then(res=>{
					this.total = res.total;
					this.toolcar = res.rows;
				})
			},
			// 查询
			findTInviteInfo() {
				var param = {
					userId: this.userInfo.id
				}
				this.$apis.findTInviteInfo(param).then(res=>{
					this.total = res.total;
					this.toolcar = res.rows;
				})
			},
			
		
		}
	}
</script>

<style lang="scss">
	page{
		background: #f6f6f6;
		.flex-1{
			flex: 1;
		}
		.lin-60{
			line-height: 60rpx;
		}
		.head-nav {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 80rpx;
			background: #fff;
			margin-bottom: 32rpx;			
			.n-l{
				width: 50%;
				text-align: center;
				line-height: 80rpx;
				font-size: 30rpx;
				color: #969799;
				position: relative;
				.icons{
					display: none;
					width: 80rpx;
					height:6rpx;
					background: #84C0F4;
					border-radius: 4rpx;
					opacity: 1;	
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					margin: auto;
				}
			}
			.activite>.icons{
				display: block;
			}	
		}		
			
		.content {			
			height: 100%;
			.content-item{
				padding: 20rpx 32rpx;
				border-bottom: 1px solid #EEEEEE;
				background: #fff;
				.userimg{
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
					opacity: 1;
					display: flex;
					align-items: center;
					overflow: hidden
					image {
						width: 100%;
						height: 100%;
						display: block;				
					}
				}
				.w-190{
					width: 190rpx;
				}
				.w-490{
					width: 490rpx;
				}
				.tops-t{
					width: 32rpx;
					height: 32rpx;
					background: #F25643;
					line-height: 32rpx;
					text-align: center;
					border-radius: 50%;
					color:#fff;
				}
			}
		}
	}
	
</style>
